
import {defineComponent, ref, watch, shallowReactive, nextTick, onMounted} from 'vue';
import * as echarts from 'echarts';

// 声明类型
const PropsType = {
    cdata: {
        type: Object,
        require: true
    },
    ratio: {
        type: Number,
        default: 1
    }
} as const

const colorList = [
    '#3a96f5',
    '#5faaf7',
    '#78bafe',
    '#1563f2',
    '#add2f8',
    '#e24bf4',
    '#1acaff',
    '#ffde00',
    '#89fda5'
]

// 定义主体
export default defineComponent({
    props: PropsType,
    setup(props, {emit}) {
//必须是全黑背景，echarts-wordcloud按背景渲染必须是黑色背景图
        let symbolUrl = '';
        const maskImage = new Image();

        let presents = [
            '一个桥头堡',
            "两个屏障",
            "两个基地",
            "北部边疆",
            "亮丽",
            "五大任务",
            "三区四带",
            "黄河重点生态区",
            "北方防沙带",
            "核心区域",
            "先行区",
            "生态地位",
            "中游抓好水土保持",
            "防沙带防风固沙能力",
            "生态安全屏障",
            "示范工程",
            "呼和浩特市",
            "生态能级",
            "强首府",
            "宜居",
            "宜业",
            "宜学",
            "宜养",
            "宜游",
            "五宜城市",
            "生态支撑",
            "总书记",
        ]
        let data = [];
        for (let i = 0; i < presents.length; ++i) {
            data.push({
                name: presents[i],
                value: (presents.length - i) * 20
            });
        }
        console.log('---------词云data', data)


        const chartRef = ref(null);

        // 配置项
        let option = shallowReactive({
            series: null,
            tooltip: null,
            // backgroundColor: null,
            grid: null,
            xAxis: null,
            yAxis: null,
        })

        watch(
            () => [props.cdata, props.ratio],
            (value: any) => {
                let val = value[0];
                let ratio = value[1] || 1;
                if (maskImage) {
                    maskImage.src = symbolUrl;
                }
                option = {
                    // backgroundColor: '#0A2E5D',
                    tooltip: {
                        show: true
                    },
                    grid: {
                        left: 0,
                        bottom: 0,
                        top: 0,
                        right: 0,
                        containLabel: false
                    },
                    xAxis: {
                        type: "category",
                        show: false
                    },
                    yAxis: {
                        max: 100,
                        show: false
                    },
                    series: [
                        // {
                        //     zlevel: -1,
                        //     type: 'pictorialBar',
                        //     name: 'pictorial',
                        //     silent: true,
                        //     symbol: 'image://' + symbolUrl, //按背景渲染云词
                        //     // symbolSize: ['45.2%', '35.2%'],
                        //     symbolSize: ['90%%', '90%'],
                        //     symbolPosition: 'center',
                        //     barWidth: '100%',
                        //     barMaxWidth: '100%',
                        //     itemStyle: {
                        //         opacity: .2 //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
                        //     },
                        //     data: [{
                        //         value: 100
                        //     }]
                        // },
                        {
                            type: 'wordCloud',
                            sizeRange: [100 * ratio, 200 * ratio],
                            // autoSize: {
                            //     enable: true,
                            //     minSize: 6,
                            // },
                            rotationRange: [0, 0],
                            // maskImage: maskImage,
                            // keepAspect: true,   //保持maskImage的宽高比或1:1的形状，他的选项是支持从echarts-wordcloud@2.1.0
                            textPadding: 0,
                            gridSize: 5, //以像素为单位的网格大小，用于标记画布的可用性 //网格尺寸越大，单词之间的间距越大。
                            width: '90%',
                            height: '90%',
                            left: 'center',
                            top: 'center',
                            drawOutOfBound: false,
                            shrinkToFit: true,  //如果字体太大而无法显示文本，是否收缩文本。如果将其设置为false，则文本将不渲染。如果设置为true，则文本将被缩小。
                            layoutAnimation: true,  // 执行布局动画。当有大量的单词时，关闭它会导致UI阻塞。
                            textStyle: {
                                fontFamily: "pfHeavy",
                                color: function() {
                                    let index = Math.floor(Math.random() * colorList.length);
                                    return colorList[index];
                                }
                            },

                            data: data
                        },
                    ]
                }
            },
            {
                immediate: true,
                deep: true
            }
        )

        return () => {
            return <vue-echarts ref={chartRef} autoresize={true} option={option} />
        }
    }
})
